<!--
 * @Description: 预览
 * @Author: zhailei
 * @Date: 2021-08-18 15:42:31
 * @LastEditTime: 2021-08-27 17:40:55
 * 
 * @FilePath: \vite-demoe:\wwwroot\Vue\\-cloud-vue\src\pages\document\minio\previewModal.vue
-->
<template>
  <j-modal
    :title="$ct('handleOnlinePreview', '预览')"
    width="100%"
    :visible="visible"
    :destroyOnClose="true"
    @cancel="
      () => {
        $emit('update:visible', false);
      }
    "
  >
    <a-spin :spinning="loading" class="spanLoding">
      <iframe
        v-if="type === 'file'"
        :src="fileUrl"
        frameborder="0"
        id="preFileIframe"
        width="100%"
        height="100%"
      ></iframe>
      <video
        width="100%"
        height="100%"
        controls
        v-else-if="type === 'video' && reFresh"
      >
        <source :src="fileUrl" type="video/mp4" />
        您的浏览器不支持Video标签。
      </video>
    </a-spin>
    <template slot="footer">
      <a-button
        key="submit"
        type="primary"
        @click="$emit('update:visible', false)"
      >
        关闭
      </a-button>
    </template>
  </j-modal>
</template>

<script>
export default {
  name: "previewModal",
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    loading: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      fileUrl: "",
      type: "file",
      reFresh: true,
    };
  },
  watch: {
    fileUrl(val) {
      this.reFresh = false;
      this.$nextTick(() => {
        this.reFresh = true;
      });
    },
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="less" scoped>
.spanLoding {
  height: 100%;
  /deep/.ant-spin-container {
    height: 100%;
  }
}
</style>
